<p>This rule raises an issue when <code>getAttribute()</code>, <code>setAttribute()</code>, <code>removeAttribute()</code>, or
<code>hasAttribute()</code> are used with data attributes (attributes starting with <code>data-</code>).</p>
<h2>Why is this an issue?</h2>
<p>The <code>.dataset</code> property provides a cleaner, more semantic way to work with HTML data attributes compared to generic attribute
methods.</p>
<p>Data attributes are a special category of HTML attributes designed to store custom data. The browser provides the <code>.dataset</code> API
specifically for this purpose, which offers several advantages:</p>
<ul>
  <li> <strong>Cleaner syntax</strong>: <code>element.dataset.userName</code> is more readable than
  <code>element.getAttribute('data-user-name')</code> </li>
  <li> <strong>Automatic name conversion</strong>: The API automatically converts between kebab-case HTML attributes (<code>data-user-name</code>) and
  camelCase JavaScript properties (<code>userName</code>) </li>
  <li> <strong>Semantic correctness</strong>: Using <code>.dataset</code> clearly indicates you’re working with data attributes, making the code’s
  intent more obvious </li>
  <li> <strong>Type consistency</strong>: <code>.dataset</code> properties are always strings, avoiding potential confusion with other attribute types
  </li>
</ul>
<p>Using generic attribute methods for data attributes misses these benefits and can make code less maintainable.</p>
<h3>What is the potential impact?</h3>
<p>Using generic attribute methods instead of <code>.dataset</code> reduces code readability and maintainability. While functionally equivalent, it
makes the code less expressive about working with data attributes and requires manual handling of name conversions between kebab-case and
camelCase.</p>
<h3>How to fix?</h3>
<p>Replace <code>getAttribute()</code> calls for data attributes with <code>.dataset</code> property access. The attribute name is automatically
converted from kebab-case to camelCase.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const value = element.getAttribute('data-user-name'); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
const value = element.dataset.userName;
// or with destructuring
const {userName} = element.dataset;
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/prefer-dom-node-dataset.md">prefer-dom-node-dataset</a> </li>
  <li> MDN: HTMLElement.dataset - <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset">Official documentation for the
  dataset API</a> </li>
  <li> MDN: Using data attributes - <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Guide on using HTML data
  attributes effectively</a> </li>
</ul>
